<template>
  <div class="myset">
    <!-- 全局组件 -->
    <headed />
    <div class="userBox">
      <div class="user">
        <div class="userTitle">基本信息</div>
        <div class="userImg">
          <img class="imgSize" :src="imageUrl" alt="" />
          <el-upload
            action="#"
            :show-file-list="false"
            :http-request="handleAvatarSuccess"
            :before-upload="beforeAvatarUpload"
          >
            <button class="imgBtn">更换头像</button>
          </el-upload>
        </div>
        <div class="userMsg">
          <p>
            昵 称：
            <el-input
              class="inputSet"
              v-model="inputName"
              placeholder="请输入更换的昵称"
            ></el-input>
          </p>
          <p>
            性 别：
            <el-radio v-model="inputRadio" label="1">男</el-radio>
            <el-radio v-model="inputRadio" label="2">女</el-radio>
          </p>
          <p>
            手机号：<el-input
              class="inputSet"
              v-model="inputPhone"
              placeholder="请输入更换的手机号"
            ></el-input>
          </p>
        </div>
        <button class="subBtn" @click="subBtn">确定修改</button>
      </div>
    </div>
    <foot />
  </div>
</template>
<style lang="less" scoped>
.userBox {
  position: relative;
  height: 800px;
  background-color: #e2e2e2;
  & .user {
    position: absolute;
    left: 50%;
    transform: translate(-50%, 0);
    margin-top: 100px;
    width: 1050px;
    height: 600px;
    background-color: #fff;
    & .userTitle {
      width: 1000px;
      height: 100px;
      line-height: 100px;
      margin: 0 auto;
      border-bottom: 1px solid #e2e2e2;
      font-size: 25px;
      color: #2a2a2a;
      font-weight: 700;
    }
    & .userImg {
      float: left;
      width: 400px;
      height: 350px;
      margin-top: 20px;
      margin-left: 25px;
      & .imgSize {
        width: 250px;
        height: 250px;
      }
      & .imgBtn {
        width: 100px;
        height: 30px;
        cursor: pointer;
        background-color: #fff;
      }
    }
    & .userMsg {
      float: right;
      width: 550px;
      height: 350px;
      margin-top: 20px;
      margin-right: 25px;
      padding-top: 40px;
      & .inputSet {
        width: 75%;
      }
      & > p {
        margin-top: 30px;
        text-align: left;
        margin-left: 50px;
      }
    }
  }
  & .subBtn {
    width: 350px;
    height: 60px;
    margin-top: 30px;
    font-size: 18px;
    background-color: rgb(247, 99, 73);
    color: #fff;
    border: none;
    border-radius: 10px;
    cursor: pointer;
  }
}
</style>
<script>
import { Toast } from "vant";
export default {
  data() {
    return {
      //登录用户id
      userData: JSON.parse(sessionStorage.getItem("userData")),
      imageUrl: "",
      inputName: "",
      inputPhone: "",
      inputRadio: "",
    };
  },
  mounted() {
    if (this.userData != null) {
      this.inputName = this.userData.uname;
      this.inputRadio = this.userData.sex + "";
      this.inputPhone = this.userData.phone;
    }
    if (this.userData != null && this.userData.uimg != null) {
      this.imageUrl = "http://test.com:3000/user/img?url=" + this.userData.uimg;
    } else {
      this.imageUrl = require("../assets/images/6.jpg");
    }
  },
  methods: {
    subBtn() {
      let regphone = /0?(13|14|15|17|18|19)[0-9]{9}/;
      if (
        !this.imageUrl ||
        !this.inputName ||
        !this.inputPhone ||
        !this.inputRadio
      ) {
        Toast("信息不能为空");
        return;
      }
      if (!regphone.test(this.inputPhone)) {
        Toast("请输入正确格式的手机号");
        return;
      }
      this.$http
        .post("http://test.com:3000/user/userMsg", {
          uid: this.userData.user_detail_id,
          inputName: this.inputName,
          inputPhone: this.inputPhone,
          inputRadio: this.inputRadio,
        })
        .then((res) => {
          console.log(res);
          if (res.data.code == 200) {
            Toast(res.data.msg);
            //把username存起来（用于验证是否已登录）
            sessionStorage.setItem("userData", JSON.stringify(res.data.user));
            // console.log(res.data.user);
            setTimeout(() => {
              window.location.href = "/myclass";
            }, 1000);
          } else {
            Toast(res.data.msg);
          }
        });
    },
    handleAvatarSuccess(res) {
      //上传
      let formData = new FormData();
      formData.append("file", res.file);
      formData.append("userData", JSON.stringify(this.userData));
      this.$http
        .post("http://test.com:3000/user/userImg", formData)
        .then((response) => {
          if (response.data.code == "200" && response.data.url != null) {
            this.imageUrl =
              "http://test.com:3000/user/img?url=" + response.data.url;
            this.userData.uimg = response.data.url;
            sessionStorage.setItem("userData", JSON.stringify(this.userData));
          }
        });
    },
    beforeAvatarUpload(file) {
      if (this.userData == null) {
        return false;
      }
      //上传前
      const isJPG = file.type === "image/jpeg" || file.type === "image/png";
      const isLt2M = file.size / 1024 / 1024 < 2;
      if (!isJPG) {
        this.$message.error("上传头像图片只能是 JPG 格式!");
      }
      if (!isLt2M) {
        this.$message.error("上传头像图片大小不能超过 2MB!");
      }
      return isJPG && isLt2M;
    },
  },
};
</script>